<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>室内地图基本地图示例|室内三维地图引擎|易景空间地图</title>
    <meta name="keywords" content="室内地图基本地图示例,室内地图,三维地图引擎,三维地图制作,室内定位,易景空间地图" />
    <meta name="description" content="室内地图基本地图示例,易景室内三维地图引擎提供地图浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内地图显示风格及样式，可自动绘制楼层热力图、散点图等专题地图，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的地图主题资源供二次开发调用。"/>
    <link rel="shortcut icon" type="image/ico" href="/esmap/image/favicon.ico">
    <link href="/esmap/css/common.css" rel="stylesheet">
    <style type="text/css">
        #pannel {
            position: absolute;
            left: 2%;
            bottom: 10%;
            z-index: 999;
        }

        #begin {
            background-color: rgb(97, 195, 212);
        }

        .viewmode-group {
            position: absolute;
            right: 12px;
            top: 32%;
            border-radius: 6px;
            border: none;
        }

        .viewmode-group button {
            display: inline-block;
            width: 38px;
            height: 38px;
            border-radius: 4px;
            border: none;
            background-image: url("/esmap/image/wedgets/3D.png");
        }
    </style>
</head>
<body>

<div class="loading">
    <div class="lodingImg"></div>
</div>
<div id="map-container" style="top: 0px"></div>
<div class="viewmode-group">
    <button id="btn3D" class="btn btn-default"></button>
</div>
<script src="/esmap/lib/config.js"></script>
<script src="/esmap/lib/esmap-1.6.min.js"></script>
<script src="/esmap/lib/jquery-2.1.4.min.js"></script>
<script src="/esmap/lib/jquery.qrcode.min.js"></script>
<script src="/esmap/lib/tips_controls.js"></script>
<script type="text/javascript">
    var esmapID= '[[${sysEsmap.mapId}]]';
    var token= '[[${sysEsmap.token}]]';
    var mapDataUrl= '';
    var styleid= [[${sysEsmap.themeId}]];

    // var esmapID = getQueryString('id') || defaultOpt.mapID;
    // var styleid = getQueryString("styleid") || defaultOpt.themeID;
    var container = document.getElementById('map-container');
    //放大、缩小控件配置
    var ctlOpt1 = new esmap.ESControlOptions({
        position: 1, //位置 左上角
        //位置x,y的偏移量
        offset: {
            x: 20,
            y: 80
        }
        , imgURL: "/esmap/image/wedgets/"
    });
    var container = document.getElementById('map-container');
    var map = new esmap.ESMap({
        container:container, //渲染dom
        mapDataSrc: mapDataUrl, //地图数据位置
        mapThemeSrc: defaultOpt.mapThemeUrl, //主题数据位置
        themeID: styleid,//样式ID
        visibleFloors: "all",//更多初始化参数配置请参考https://www.esmap.cn/escopemap/content/cn/develope/map-config.html
        token:token
    });
    map.on('loadComplete', function () {
        //1.直接设置地图背景
        map.setBackgroundImage('/esmap/image/bg.jpg');
        //2.设置为纯色背景色
        map.setBackgroundImage(null); //有背景图片时先取消，无背景图片则不需要此代码
        map.setBackgroundColor('#FFFFFF');   //修改背景颜色
    });
    // 1.声明楼层控件配置参数
    var ctlOpt = new esmap.ESControlOptions({
        position: esmap.ESControlPositon.RIGHT_TOP,
        imgURL: "/esmap/image/wedgets/"
    });

    // 2.在地图加载完成事件中新建楼层控制控件对象
    map.on('loadComplete', function () {
        //创建楼层控件
        floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);

        // //单层多层切换按钮
        // var toolControl = new esmap.ESToolControl(map);

        //或者折叠式按钮的楼层控件
        floorControl = new esmap.ESButtonFloorsControl(map, ctlOpt);
    });
    // 1.声明放大、缩小控件配置参数
    var ctlOpt1 = new esmap.ESControlOptions({
        position: 1, //位置 左上角
        //位置x,y的偏移量
        offset: {
            x: 20,
            y: 80
        }
        , imgURL: "/esmap/image/wedgets/"
    });
    map.showScaler = true;     //显示地图比例尺
    //添加指南针非常简单，只需要在地图初始化时声明以下属性即可

    map.showCompass = true;     //显示指北针
    // 2.在地图加载完成事件中新建控件对象
    map.on('loadComplete', function () {
        //创建放大、缩小控件
        var zoomControl = new esmap.ESZoomControl(map, ctlOpt1);
    });
    //地图加载完成回调
    map.on('loadComplete', function () {
        floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);
        var zoomControl = new esmap.ESZoomControl(map, ctlOpt1);
        bingEvents();
    });
    //打开地图数据
    map.openMapById(esmapID);
    map.showCompass = true;     //显示指南针
    // //2维模式
    // $('#btn2D').on('click', function () {
    //     map.viewMode = esmap.ESViewMode.MODE_2D;//2维模式
    // });
    //
    // //3维模式
    // $('#btn3D').on('click', function () {
    //     map.viewMode = esmap.ESViewMode.MODE_3D;; //3维模式
    // });
    //绑定事件
    function bingEvents() {
        document.getElementById('btn3D').onclick = function () {
            if (map.viewMode == esmap.ESViewMode.MODE_2D) {
                map.viewMode = esmap.ESViewMode.MODE_3D; //2D-->3D
                document.getElementById('btn3D').style.backgroundImage = "url('/esmap/image/wedgets/3D.png')";
            } else {
                map.viewMode = esmap.ESViewMode.MODE_2D; //3D-->2D
                document.getElementById('btn3D').style.backgroundImage = "url('/esmap/image/wedgets/2D.png')";
            }
        }
    }
</script>
</body>

</html>